<template>
  <!-- 点检完成汇总 -->
  <div class="echartsDiv">
    <div v-if="data" id="equipmentLineTwo" style="width: 100%;height: 100%;" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      data: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* 设备总览 */
    setEquipmentLineTwo(data) {
      this.data = data
      const option = {
        grid: {
          show: false,
          top: '10%',
          right: '0',
          bottom: '20%',
          left: '16%'
        },
        xAxis: {
          position: 'bottom', // x轴的位置
          offset: 10, // x轴相对于默认位置的偏移
          splitLine: { show: false },
          axisLine: {
            // 坐标轴 轴线
            lineStyle: {
              color: '#0B4074',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#fff'
            // interval: 0 // 代表显示所有x轴标签显示
          },
          axisTick: {
            show: false
          },
          type: 'category',
          data: data.time
        },
        yAxis: {
          position: 'left', // x轴的位置
          offset: 20, // x轴相对于默认位置的偏移
          splitLine: { show: false },
          axisLine: {
            // 坐标轴 轴线
            show: true,
            lineStyle: {
              color: '#0B4074',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          type: 'value'
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            stack: 'Total',
            data: data.num,
            type: 'bar',
            barWidth: '50%',
            label: {
              formatter: '{c}',
              show: true,
              position: 'top',
              // textStyle: {
              fontWeight: 'normal',
              fontSize: '10',
              color: '#fff'
              // }
            },
            color: '#1592FE'
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('equipmentLineTwo'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
      // this.myChart.on('click', function (param) {
      //   that.$emit('eqOverViewInfo', param['name'])
      // })
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsDiv {
  height: 100%;
}
</style>
